<template>
  <view class="affiche">
    <view class="affiche_list">
      <view class="affiche_list_item" v-for="item in list" :key="item.noticeId" @click="afficheInfo(item)">
        <view class="left">
          <img :src="item.cover" alt="">
        </view>
        <view class="right">
          <view class="name">{{ item.noticeTitle }}</view>
          <view class="author">
            发布人：{{ item.remark }}
          </view>
          <view class="state">
            <view class="date">
              <u-icon name="clock"></u-icon>
              <text>{{ item.createTime }}</text>
            </view>
            <view class="look">
              <u-icon name="eye-fill"></u-icon>
              <text>{{ item.status }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { noticeList } from '../../common/api';

export default {
  data() {
    return {
      list: [], // 列表
    };
  },
  onLoad() {
    this.getNoticeList();
    uni.showLoading({
      title: '加载中...'
    });
  },
  methods: {
    async getNoticeList() {
      try {
        let res = await noticeList();
        if (Array.isArray(res)) {
          this.list = res;
          console.log(res, 111);
        } else {
          console.error('数据格式错误，获取的不是数组');
          uni.showToast({
            title: '数据格式错误，请稍后重试',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('获取公告列表失败', error);
        uni.showToast({
          title: '获取公告列表失败，请稍后重试',
          icon: 'none'
        });
      } finally {
        uni.hideLoading();
      }
    },
    afficheInfo(item) {
      uni.setStorageSync('currentAffiche', item);
      uni.navigateTo({
        url: '/pages/afficheInfo/afficheInfo'
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.affiche {
  padding: 0 32rpx;
 .affiche_list {
   .affiche_list_item {
      display: flex;
      padding: 20rpx;
      border-radius: 18rpx;
      background: #f5f5f5;
      margin: 32rpx 0;
     .left {
        width: 200rpx;
        height: 180rpx;
        img {
          width: 100%;
          height: 100%;
          border-radius: 18rpx;
        }
      }
     .right {
        width: calc(100% - 200rpx);
        margin-left: 20rpx;
        display: flex;
        flex-flow: column;
        justify-content: space-between;
       .name {
          font-size: $uni-font-size-small;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
       .author {
          font-size: $uni-font-size-small;
          color: $uni-color-type1;
        }
       .state {
          display: flex;
          justify-content: space-between;
          color: $uni-color-type1;
        }
       .date,
       .look {
          font-size: $uni-font-size-mini;
          display: flex;
          text {
            margin-left: 10rpx;
          }
        }
      }
    }
  }
}
</style>